<script setup lang="ts">
const imgsObj={
  positive:'/imgs/admin/realname-positive.jpg',
  positive2:'/imgs/admin/realname-positive2.jpg',
  entries:'/imgs/admin/entries.jpg',
}
let {apiBase,imgBase}=useRuntimeConfig().public;
const route=useRoute()
if(route.path.startsWith('/backend')){
  apiBase=apiBase+'/backend';
}
const login=useLoginStore();
const props=defineProps<{
  limit:number,
  multiple:boolean,
  desc:'',
}>()
const fileList=defineModel<Array<any>>()
const handleSuccess=(response:any,file:File,list:any)=>{
  if(response.code==200){
    file.url=response.data.file_path;
  }
}
const handleRemove=(file:File)=>{
  fileList.value=fileList.value?.filter((item:any)=>item.url!=file.url);
  console.log(fileList.value);
}
const handlePreview=(file:File)=>{
  window.open(`${imgBase}/${file.url}`);
}
</script>

<template>
  <el-upload
      class="w-full"
      drag
      :action="`${apiBase}/tools/uploadFile`"
      :multiple="props.multiple"
      :headers="{Authorization:login.token}"
      :limit="props.limit"
      @change="handleChange"
      @success="handleSuccess"
      @preview="handlePreview"
      @remove="handleRemove"
      method="post"
      name="file"
      v-model:file-list="fileList"
      list-type="picture"
  >
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">
      <el-button type="primary">点击上传{{ props.desc }}</el-button>
    </div>
    <template #file="{file}">
      <div class="flex">
        <div>
          <MyImage :src="file.url" :list="[file.url]" style="width:100%!important;height:auto!important;max-height: 200px;" v-if="file.url"/>
          <div class="line-clamp-1">{{file.name}}</div>
        </div>
        <div class="flex justify-center items-center">
          <el-icon-delete class="text-red-400 w-5 h-5" @click="handleRemove(file)" />
        </div>
      </div>

    </template>
  </el-upload>
</template>

<style scoped lang="scss">
.positive,.positive2,.entries{
  ::v-deep(.el-upload-dragger){
    background-color: transparent;
  }
  ::v-deep(.el-upload){
    background-size: 100% 100%;
  }
}
.positive2 ::v-deep(.el-upload){
  background-image: url("/imgs/admin/realname-positive2.jpg");
}
.positive ::v-deep(.el-upload){
  background-image: url("/imgs/admin/realname-positive.jpg");
}
.entries ::v-deep(.el-upload){
  background-image: url("/imgs/admin/entries.jpg");
}
</style>